<template>
    <div class="searchCont">
            <div class="hot">
                <div class="hotTitle" v-if="islishi">
                    <span>历史记录</span>
                    <van-icon name="delete-o" @click="bindele"/>
                </div>
                <div class="hotCont">
                    <div v-for="(item,i) in lishiData" :key="i" @click="binto(item.title)">
                        {{item.title}}
                    </div>
                </div>
            </div>
            <div class="hot">
                <div class="hotTitle">
                    <span>热门搜索</span>
                </div>
                <div class="hotCont">
                    <div v-for="(item,i) in hotData" :key="i" @click="binto(item.title)" :class="i===0 ? 'cont1': i===1 || i===2 ? 'cont2':''" >
                        {{item.title}}
                    </div>
                </div>
            </div>
        </div>
</template>

<script>
    export default {
        name:'hotsearch',
        data() {
            return {
                islishi:false,
                hotData:[],
                lishiData:[]
            };
        },
        created(){
            if(localStorage.getItem('lishiData')===null || localStorage.getItem('lishiData')==='[]'){
                this.islishi = false
            }else{
                this.lishiData = JSON.parse(localStorage.getItem('lishiData'))
                this.islishi = true
            }
            if (this.lishiData!= undefined) {
                this.lishiData = this.lishiData.reverse()
            }
            this.axios.get('https://apis.netstart.cn/douguo/recipe/search/hot'). then((response) => {
                if (response.data.state=== "success") {
                    this.hotData = response.data.result.suggestdetails
                }
            })
        },
        methods:{
            bindele(){
                this.islishi = false
                this.lishiData = []
                localStorage.setItem('lishiData',JSON.stringify(this.lishiData))
                this.$emit('dele')
            },
            binto(v){
                this.$emit('todian',v)
            }
        }
    }
</script>

<style lang="less" scoped>
    .searchCont{
        padding: 10px 20px;
        box-sizing: border-box;
        .hot{
            margin-bottom: 20px;
            .hotTitle{
                margin-bottom: 10px;
                display: flex;
                justify-content: space-between;
                >i{
                    font-size: 16px;
                }
            }
            .hotCont{
                display: flex;
                flex-wrap: wrap;
                >div{
                    padding: 2px 10px;
                    margin-right: 5px;
                    line-height: 20px;
                    text-align: center;
                    border-radius: 5px;
                    background-color: #f1f1f1;
                    margin-bottom: 5px;
                }
                .cont1{
                    background-color: #ffffff;
                    border: 1px solid #f16767;
                    color: #f16767;
                }
                .cont2{
                    background-color: #f1f1f1;
                    border: 1px solid #50969F;
                    color: #50969F;
                }
            }
        }
    }
</style>